<template>
  <div class="collect">
    <div class="header">
      <index-header title="我的收藏夹" ifTitleClick :handleChange="handleChanges" titleBgColor="#32aefd" isShowTab :goodsTypes="goodsTypes" :selectedDefault="selectedDefault" placeholder="输入商品或店铺相关信息">
        <template #other>
          <div class="other">
            <div v-if="muchManage !== '批量管理'">
              <el-checkbox v-model="allSelected" @change="checked => handleAllSelect(checked)">
                <span :style="{fontSize: '16px'}">全选</span>
              </el-checkbox>
            </div>
            <el-popconfirm title="确定移出收藏夹吗？" @onConfirm="handleDelete" v-if="muchManage !== '批量管理'">
              <div :style="{cursor: 'pointer'}" slot="reference">
                <i class="iconfont icon-delete" />删除
              </div>
            </el-popconfirm>
            <div v-text="muchManage" class="button" @click="handleMuchManage" />
          </div>
        </template>
      </index-header>
    </div>
    <div class="main">
      <div class="main-left">
        <div v-if=" currentTabs === 0 ">
          <ShowContain title="收藏的宝贝" v-for="(value,keys) in goodsDatas" :key="keys">
            <div v-for="(item,index) in value" :key="index" :style="{marginBottom: '20px'}">
              <Goods :goods="item" :itemClick="muchManage === '批量管理'? false: handleItemManage" :isMuchMange="muchManage !== '批量管理'" />
            </div>
          </ShowContain>
          <div class="main-left-pagination">
            <Pagination :pagination="pagination" :numChange="handlePaginate"/>
          </div>
        </div>
        <div v-if=" currentTabs === 1 ">
          <ShowContain title="收藏的店铺">
            <div class="shopMain">
              <div v-for="(item,index) in collectShop" :key="index" class="collectShopItem" @click="handleShopSelect(item.shop_id)">
                <div class="shopPic">
                  <img :src="item.picUrl || userPic" alt="">
                </div>
                <div class="shopDes">
                  <p @click.stop="handleGoShop(item.shop_id)">{{item.shop_name}}</p>
                  <!-- <p>{{item.user_realName}}</p> -->
                </div>
                <div class="shopGoodContain">
                  <div class="shopGood" v-for="(good, i) in item.goods" :key="i">
                    <p><img :src="good.goods2title_title" alt="" @click.stop="handleGoDetail(good.goods_id)"></p>
                    <p>¥ {{good.goods_price}}</p>
                  </div>
                </div>
                <div v-if="muchManage === '取消管理'" :class="{'isMuchMange': true, 'Selected': item.selected}" />
              </div>
            </div>
          </ShowContain>
          <div class="main-left-pagination">
            <Pagination :pagination="pagination2" :numChange="handlePaginate"/>
          </div>
        </div>
      </div>
      <div class="main-right">
        <ShowContain :title="typesMap[keys]+'推荐'" v-for="(value,keys) in recommendDatas" :key="keys">
          <Goods v-for="(item,index) in value" :key="index" :goods="item" />
        </ShowContain>
      </div>
    </div>
  </div>
</template>

<script>
import IndexHeader from '@/components/IndexHeader';
import ShowContain from '@/components/ShowContain';
import Goods from '@/components/Goods';
import Pagination from '@/components/Pagination';
import { mapActions, mapState } from 'vuex';
export default {
  components: {
    IndexHeader,
    ShowContain,
    Goods,
    Pagination
  },
  computed: {
    ...mapState({
      goodsDatas: state => state.collect.goodsDatas,
      collectShop: state => state.collect.collectShop,
      userInfo: state => state.user.userInfo,
      pagination: state => state.collect.pagination,
      pagination2: state => state.collect.pagination2,
      recommendDatas: state => state.index.recommendDatas,
      login: state => state.user.login
    }),
    goodsTypes () {
      return [`宝贝 ${this.goodsDatas.myCollectGoods.length}`, `店铺 ${this.collectShop.length}`];
    }
  },
  data () {
    return {
      userPic: require("@/assets/user.png"),
      currentTabs: 0,
      typesMap: {               //给goodsDatas做映射而已
        template: '模板',
        component: '组件',
        pictrue: '图片',
        icon: '图标',
        sdk: 'sdk'
      },
      allSelected: false,
      muchManage: '批量管理',
      selectedDefault: 0
    }
  },
  created(){
    this.fetchCollectGoods({ 
      user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id, 
      pageNum: this.pagination.pageNum, 
      pageSize: this.pagination.pageSize 
    });
    this.fetchCollectShop({ 
      user_id: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id,
      pageNum: this.pagination.pageNum, 
      pageSize: this.pagination.pageSize 
    });
  },
  methods: {
    ...mapActions(['fetchCollectGoods', 'fetchCollectShop', 'fetchDeleteGoods', 'fetchDeleteShop']),
    handleChanges (which, index) {
      this.currentTabs = index;
      this.selectedDefault = index;
    },
    handleItemManage (good) {
      this.goodsDatas.myCollectGoods.forEach(item => {
        if (good.collect2goods_id === item.collect2goods_id) {
          item.selected = !item.selected;
        }
      });
      let arr = [];
      this.goodsDatas.myCollectGoods.forEach(item => {
        arr.push(item.selected);
      });
      this.allSelected = arr.reduce((a, b) => a && b);
    },
    handleAllSelect (checked) {
      this.allSelected = checked;
      if (this.currentTabs === 0) {
        this.goodsDatas.myCollectGoods.forEach(item => {
          item.selected = this.allSelected;
        })
      } else {
        this.collectShop.forEach(item => {
          item.selected = this.allSelected;
        })
      }
    },
    handleMuchManage () {
      this.muchManage === '批量管理' ? this.muchManage = '取消管理' : this.muchManage = '批量管理';
      if (this.muchManage === '批量管理') {
        this.goodsDatas.myCollectGoods.forEach(item => {
          item.selected = false;
        });
        this.allSelected = false;
      }
    },
    handleDelete () {
      let deleteArrId = [];
      if (this.currentTabs === 0) {
        this.goodsDatas.myCollectGoods.forEach(item => {
          if (item.selected) {
            deleteArrId.push(item.collect2goods_goodsid);
          }
        });
        if(deleteArrId.length === 0){
          this.$message({message: '请选择要删除的内容。', type: 'warning', showClose: true});
          return ;
        }
        deleteArrId.forEach(id => {
          this.goodsDatas.myCollectGoods.forEach((item, index) => {
            if (item.collect2goods_goodsid === id) {
              this.goodsDatas.myCollectGoods.splice(index, 1);
            }
          })
        });
        this.fetchDeleteGoods({ user_id: this.userInfo.user_id, goods_idList: deleteArrId });
      } else {
        this.collectShop.forEach(item => {
          if (item.selected) {
            deleteArrId.push(item.shop_id);
          }
        });
        if(deleteArrId.length === 0){
          this.$message({message: '请选择要删除的内容。', type: 'warning', showClose: true});
          return ;
        }
        deleteArrId.forEach(shop_id => {
          this.collectShop.forEach((item, index) => {
            if (item.shop_id === shop_id) {
              this.collectShop.splice(index, 1);
            }
          })
        });
        this.fetchDeleteShop({ user_id: this.userInfo.user_id, shop_idList: deleteArrId });
      }
    },
    handleShopSelect (shop_id) {
      if (this.muchManage === '批量管理') {
        return false;
      } else {
        this.collectShop.forEach(item => {
          if (item.shop_id === shop_id) {
            item.selected = !item.selected;
          }
          let arr = [];
          this.collectShop.forEach(item => {
            arr.push(item.selected);
          });
          this.allSelected = arr.reduce((a, b) => a && b);
        })
      }
    },
    handleGoShop (shopId) {
      this.$router.push({ name: 'Shop', query: { shop_id: shopId } });
    },
    handleGoDetail (goodId) {
      this.$router.push({ name: 'Detail', query: { goods_id: goodId } });
    },
    handlePaginate(num){
      if(this.currentTabs === 0){
        this.fetchCollectGoods({ 
          user_id: this.userInfo.user_id,
          pageNum: num,
          pageSize: this.pagination.pageSize 
        });
      }else{
        this.fetchCollectShop({ 
          user_id: this.userInfo.user_id, 
          pageNum: num,
          pageSize: this.pagination2.pageSize 
        })
      }
    }
  },
  watch: {
    currentTabs () {
      this.muchManage = '批量管理';
      this.allSelected = false;
    },
    goodsDatas: {
      handler (newV) {
        this.goodsTypes.splice(0, 1, `宝贝 ${newV.myCollectGoods.length}`)
      },
      deep: true
    },
    collectShop: {
      handler (newV) {
        this.goodsTypes.splice(1, 1, `店铺 ${newV.length}`)
      }
    },
    allSelected (n) {
      if (!n) {
        this.goodsDatas.myCollectGoods.forEach(item => {
          item.selected = false;
        });
        this.collectShop.forEach(item => {
          item.selected = false;
        })
      }
    }
  }
}
</script>

<style lang="scss" src="./index.scss" scoped/>